<template>
	<view>
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<view>
			<qmy-custom-navbar :path="`/qmy_user/user/myPage?usid=${circleDetail.userId}`"
				:userGender="circleDetail.userInfo.gender"
				:imgUrl="circleDetail.userInfo.avatar|| 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
				:title="circleDetail.userInfo.username || '匿名用户'"></qmy-custom-navbar>
		</view>
		<!-- #endif -->
		<!-- 轮播 -->
		<view :style="{paddingTop:menuObject.top + menuObject.height + 8 +'px'}" class="w-100">
			<z-swiper ref="zSwiper" v-model="circleDetail.images" :options="options" @slideChange="onChange">
				<z-swiper-item v-for="(item,index) in circleDetail.images" :key="index">
					<image @click="$previewImage(circleDetail.images,index)" class="w-100 image-height" :src="item"
						mode="aspectFill">
					</image>
				</z-swiper-item>
			</z-swiper>
		</view>
		<!-- 轮播图指示点 -->
		<view class="pos-rela w-100" style="height: 10rpx;">
			<sdp :resdata="circleDetail.images" :currentIndex="swiperIndex" class="my-sdp pos-abso"></sdp>
		</view>
		<view class="ping-30 bottom-index pos-rela">
			<image src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/bl.png"
				class="w-100 h-60 pos-abso img-min" />
			<view class="fw-600 fs-32">{{circleDetail.title || ''}}</view>
			<!-- <view class="fs-24 mt-20 col-b1">2-20 10:00</view> -->
			<view class="fs-30 mt-20">
				<mp-html :content="circleDetail.content"></mp-html>
			</view>
			<view v-if="circleDetail.activity_id"
				class="bac-col-fa flex-dir-row flex-x-bet ali-item-cen ping-10 br-20 mt-20">
				<view class="flex-dir-row ali-item-cen pr-10">
					<image class="br-10 image-activity" :src="circleDetail.activity_img[0].src" mode="aspectFill">
					</image>
					<view class="ml-10 flex-1 flex-dir-col">
						<view class="fs-28 text-element-1 ">{{circleDetail.activity_name}}</view>
						<view class="fs-24 col-b1 mt-5">{{circleDetail.sign_up_count}}人已报名活动</view>
					</view>
				</view>
				<view class="border-left fs-28 ping-0-20 whi-sp"
					@click="$NavigateTo(`/pages/detail/detail?id=${circleDetail.activity_id}`)">去报名</view>
			</view>
			<view class="fw-600 fs-30 mt-30">评论（{{commentList.length || 0}})</view>
			<view class="mt-20 pb-20">
				<view v-for="(item, index) in commentList" class="flex-dir-row ali-item-sta mb-30" :key="index"
					:id="'comment-' + item.id" :class="{'comment-flash': isFlashing && targetCommentId === item.id}">
					<!-- 头像 -->
					<view @click="$NavigateTo(`/qmy_user/user/myPage?usid=${item.userId}`)">
						<qmy-gender-border :gender="item.userInfo.gender"
							:avatar="item.userInfo.avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
							:avatarWidth="70 + 'rpx'" :avatarHeight="70 + 'rpx'"></qmy-gender-border>
					</view>
					<view class="flex-1 flex-dir-col ml-20">
						<!-- 昵称 -->
						<view class="fs-28 col-87 text-element-1">{{ item.userInfo.nickname  || '匿名用户'}}</view>
						<!-- 评论内容 -->
						<view class="fs-30 mt-5">
							<view>{{ item.content }}</view>
							<view class="flex-dir-row flex-x-bet ali-item-cen col-b1 mt-5">
								<view class="flex-dir-row ali-item-cen">
									<view class="fs-26 col-b1">{{$timeFormat(item.createTime)}}</view>
									<view @click="reply(item)" class="fs-26 col-87 ml-10 fw-600">回复</view>
								</view>
								<view class="flex-dir-row ali-item-cen">
									<view @click="likeComment(item.id, 0)" class="iconfont fs-44"
										:class="item.isLikedByCurrentUser ? 'col-00ba31 ic-nice' : 'col-b1 ic-nice-line'">
									</view>
									<view v-if="item.likeCount" class="fs-30">{{ item.likeCount }}
									</view>
								</view>
							</view>
						</view>
						<!-- 关联评论（折叠显示） -->
						<view v-if="item.replyComments && item.replyComments.length"
							class="fs-30 mt-20 bg-f6 p-20 br-10 overflow-h">
							<view
								:style="{height: (displayedReplies[item.id] || 1) * commentHeight + 'px', transition: 'height 0.3s ease-in-out'}"
								class="overflow-h">
								<view v-for="(its, i) in item.replyComments"
									:class="[{'comment-flash': isFlashing && targetCommentId === its.id}, i === 0 ? 'comment-height' : '']"
									class="flex-dir-row ali-item-sta pb-20" :key="i" :id="'comment-' + its.id">
									<view @click="$NavigateTo(`/qmy_user/user/myPage?usid=${its.replyUserInfo.id}`)">
										<qmy-gender-border iconWidth="20rpx" iconHeight="20rpx" iconSize="16rpx"
											iconLineHeight="20rpx" :gender="its.replyUserInfo.gender"
											:avatar="its.replyUserInfo.avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
											:avatarWidth="55 + 'rpx'" :avatarHeight="55 + 'rpx'"></qmy-gender-border>
									</view>

									<view class="flex-1 flex-dir-col ml-20">
										<view class="fs-26 col-87 text-element-1 flex-dir-row ali-item-cen">
											<text>{{its.replyUserInfo.nickname || '匿名用户'}}</text>
											<view v-if="its.displayText" class="flex-dir-row ali-item-cen">
												<text
													class="iconfont ic-arrow_right_fat fs-34 mt-5 ml-5 mr-5 col-b1"></text>
												<text>{{its.displayText}}</text>
											</view>
										</view>
										<view class="fs-30 mt-5">
											<view>{{ its.content }}</view>
											<view class="flex-dir-row flex-x-bet ali-item-cen col-b1 mt-5">
												<view class="flex-dir-row ali-item-cen">
													<view class="fs-26 col-b1">{{$timeFormat(its.createTime)}}</view>
													<view @click="reply(its,item)" class="fs-26 col-87 ml-10 fw-600">回复
													</view>
												</view>
												<view class="flex-dir-row ali-item-cen">
													<view @click="likeComment(its.id, 1)" class="iconfont fs-44"
														:class="its.isLikedByCurrentUser ? 'col-00ba31 ic-nice' : 'col-b1 ic-nice-line'">
													</view>
													<view v-if="its.likeCount" class="fs-30">
														{{ its.likeCount }}
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 展开/收起按钮 -->
							<view v-if="item.replyComments.length > 1"
								class="fs-26 col-87 flex-dir-row ali-item-cen">
								<view v-if="(displayedReplies[item.id] || 1) < item.replyComments.length"
									class="flex-dir-row ali-item-cen">
									<view @click="expandReply(item.id, item.replyComments.length)">
										<text class="iconfont ic-hengxian1 mr-10"></text>
										<text
											v-if="displayedReplies[item.id]?displayedReplies[item.id] == 1 : !displayedReplies[item.id]">{{`展开${item.replyComments.length - (displayedReplies[item.id] || 1)}条回复`}}</text>
										<text v-else class="fw-600">查看更多</text>
										<text class="iconfont ic-shang ml-5 fw-600"></text>
									</view>
									<view @click="retractReply(item.id)"
										v-if="displayedReplies[item.id]?displayedReplies[item.id] > 1 : displayedReplies[item.id]"
										class="ml-30">
										<text class="fw-600">收起</text>
										<text class="iconfont ic-xia fw-600"></text>
									</view>
								</view>
								<text v-else class="fw-600" @click="retractReply(item.id)">收起回复</text>
							</view>

						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 底部输入框，动态定位适配输入法高度 -->
		<view class="bor-top-f3 bac-col-f bac-col-f w-100 ping-20 fixed-bottom"
			:class="keyboardHeight == 0 ?'bottom-h':''" :style="{bottom:keyboardHeight+'px'}">
			<view class="flex-dir-row ali-item-cen flex-x-bet">
				<view class="bac-col-fa ping-10-20 br-10 input-container">
					<input class="fs-26 w-100 auto-blur input-style" type="text" @focus="focusChange" @blur="blurChange"
						:adjust-position="false" v-model="commentText" confirm-type="send"
						:placeholder="inputPlaceholder" @confirm="inputComment" :focus="inputFocus" />
				</view>
				<view @click="likeCircle" class="text-ali-c">
					<view class="iconfont fs-50"
						:class="circleDetail.isLikedByCurrentUser ? 'col-00ba31 ic-nice' : 'ic-nice-line'">
					</view>
					<view class="fs-26">{{circleDetail.likeCount || 0}}</view>
				</view>
				<view @click="commentCircle" class="text-ali-c">
					<view class="iconfont ic-talk-line fs-50"></view>
					<view class="fs-26">{{commentList.length}}</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="text-ali-c">
					<view class="iconfont ic-share-line fs-50 lh-50"></view>
					<view class="fs-26" style="line-height: 34rpx;">分享</view>
				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view @click="$Toast('H5暂不开放分享')" class="text-ali-c">
					<view class="iconfont ic-talk-line fs-50"></view>
					<view class="fs-26">{{commentList.length}}</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		store,
		mutations
	} from '@/utils/store.js'
	import sdp from '@/components/swiper-dynamic-bullets/swiper-dynamic-bullets.vue';
	import { getPostDetailApi, likePostApi, unlikePostApi, addCommentApi, addReplyCommentApi, likeCommentApi, unlikeCommentApi, isLikedCommentApi, getCommentsByPostIdApi } from '@/api/post/posts.js'

	export default {
		components: {
			sdp
		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				options: {
					initialSlide: 0, //初始显示的图片下标
				},
				swiperIndex: 0, //轮播图下标
				commentText: '', //评论内容
				circleId: '', //圈子id, 从options获取
				circleDetail: {}, //圈子详情
				commentList: [], //评论列表
				commentPage: 1, // 评论当前页码
				commentPageSize: 10, // 评论每页数量
				hasMoreComments: true, // 是否有更多评论数据
				replyCommentType: 0, //回复的评论类型，0表示评论圈子，1表示回复评论
				inputPlaceholder: '和大家一起聊聊吧...', //输入框提示
				inputFocus: false, //输入框是否聚焦
				replyCommentId: '', //回复的评论id
				showAllReply: {}, // 记录每个评论是否展开关联评论
				commentHeight: 0, // 存储获取到的高度
				displayedReplies: {}, // 每个 item 显示的评论数量
				keyboardHeight: 0, // 键盘高度
				dataLoaded: false, //数据加载完成
				superlativeId: '', //最高级评论id
				targetCommentId: '', // 目标评论id
				isFlashing: false, // 是否正在闪烁
				isCommentPosition: false, // 是否定位过评论位置状态
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo; //用户信息
			},
		},
		onLoad(e) {
			this.circleId = e.id;
			this.targetCommentId = e.commentId; // 获取目标评论id
			this.dataLoaded = false; // 初始设置为未加载
			Promise.all([
				this.getCircleDetail(),
				this.getComment(1, this.commentPageSize)
			]).then(() => {
				this.dataLoaded = true;
				this.$nextTick(() => {
					this.getCommentHeight();
					if (this.targetCommentId && !this.isCommentPosition) {
						this.isCommentPosition = true;
						setTimeout(() => {
							this.scrollToComment();
						}, 500);
					}
				});
			}).catch(err => {
				console.error("页面数据加载失败", err);
				this.$Toast("页面数据加载失败");
				this.dataLoaded = true;
			});
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.commentPage = 1; // 重置页码
			this.hasMoreComments = true; // 重置更多数据状态
			this.commentList = []; // 清空现有列表
			this.dataLoaded = false;
			Promise.all([
				this.getCircleDetail(),
				this.getComment(1, this.commentPageSize)
			]).then(() => {
				uni.stopPullDownRefresh();
				this.$Toast("刷新成功");
				this.dataLoaded = true;
			}).catch(err => {
				console.error("刷新失败", err);
				uni.stopPullDownRefresh();
				this.$Toast("刷新失败");
				this.dataLoaded = true;
			});
		},
		onReachBottom() {
			if (this.hasMoreComments && !this.loading && this.dataLoaded) {
				this.commentPage++;
				this.getComment(this.commentPage, this.commentPageSize);
			}
		},
		methods: {
			//图片预览
			previewImage(index) {
				uni.previewImage({
					urls: this.circleDetail.thumbnail || this.circleDetail.images,
					current: index
				});
			},
			//获取圈子详情
			async getCircleDetail() {
				try {
					const res = await getPostDetailApi(this.circleId);
					if (res.data.code === 200) {
						let detail = res.data.data;
						// 后端返回的图片字段是 images，且为JSON字符串，需要解析
						detail.images = detail.images ? JSON.parse(detail.images) : [];
						// 如果后端有tags字段，也需要解析
						detail.tags = detail.tags ? JSON.parse(detail.tags) : [];
						// 如果后端有topics字段，也需要解析
						detail.topics = detail.topics ? JSON.parse(detail.topics) : [];

						// 映射字段以兼容旧的data结构
						detail.thumbnail = detail.images; // 轮播图使用images
						detail.user_name = detail.userInfo ? detail.userInfo.nickName : '';
						detail.user_gender = detail.userInfo ? detail.userInfo.gender : 0;
						detail.user_avatar = detail.userInfo ? detail.userInfo.avatar : '';
						detail.like_user_id = detail.likeUserIds || []; // 兼容旧的点赞用户列表
						// 后端直接返回isLikedByCurrentUser

						this.circleDetail = detail;
					} else {
						this.$Toast(res.msg || "获取圈子详情失败");
					}
				} catch (e) {
					console.error("获取圈子详情异常", e);
					this.$Toast("获取圈子详情失败");
				}
			},
			//获取评论
			async getComment(pageNumber, pageSize) {
				if (!this.circleId) return; // 圈子ID不存在则不加载
				this.loading = true;
				try {
					// 获取顶级评论
					const topCommentsRes = await getCommentsByPostIdApi({
						postId: this.circleId,
						pageNumber: pageNumber,
						pageSize: pageSize,
						parentId: null // 查询顶级评论
					});

					if (topCommentsRes.data.code === 200) {
						let topRecords = topCommentsRes.data.data.records || [];

						// 为每个顶级评论获取其子评论
						for (const comment of topRecords) {
							const replyCommentsRes = await getCommentsByPostIdApi({
								postId: this.circleId,
								pageNumber: 1, // 子评论从第一页开始加载
								pageSize: 100, // 假设子评论一次性加载完，或者可以根据需要分页
								parentId: comment.id
							});
							if (replyCommentsRes.data.code === 200) {
								comment.replyComments = replyCommentsRes.data.data.records || [];
							} else {
								console.error("获取子评论失败", replyCommentsRes.msg);
								comment.replyComments = [];
							}
							// 处理 displayText
							comment.replyComments.forEach(reply => {
								if (reply.parentUserInfo && reply.parentUserInfo.nickname) {
									reply.displayText = reply.parentUserInfo.nickname;
								} else {
									reply.displayText = '';
								}
							});
						}

						if (pageNumber === 1) {
							this.commentList = topRecords;
						} else {
							this.commentList = [...this.commentList, ...topRecords];
						}
						this.hasMoreComments = topRecords.length === pageSize;

						// 如果是首次加载并且有目标评论ID，则滚动到评论位置
						if (this.targetCommentId && !this.isCommentPosition) {
							this.isCommentPosition = true; // 标记已定位，防止重复执行
							this.$nextTick(() => {
								this.scrollToComment();
							});
						}
					} else {
						this.$Toast(topCommentsRes.msg || "获取评论失败");
					}
				} catch (e) {
					console.error("获取评论异常", e);
					this.$Toast("获取评论失败");
				} finally {
					this.loading = false;
				}
			},
			// 获取单条评论的高度
			getCommentHeight() {
				uni.createSelectorQuery()
					.select(".comment-height")
					.boundingClientRect((res) => {
						if (res) {
							this.commentHeight = res.height;
						}
					})
					.exec();
			},

			// 展开/收起评论
			toggleReply(commentId, totalCount) {
				// 震动
				uni.vibrateShort();
				if (!this.displayedReplies[commentId]) {
					// 默认显示 1 条
					this.$set(this.displayedReplies, commentId, 1);
				}

				if (this.displayedReplies[commentId] < totalCount) {
					// 每次增加 10 条
					this.displayedReplies[commentId] = Math.min(this.displayedReplies[commentId] + 10, totalCount);
				} else {
					// 已经全部展开 -> 重新折叠回 1 条
					this.displayedReplies[commentId] = 1;
				}
			},
			//展开回复
			expandReply(commentId, totalCount) {
				this.toggleReply(commentId, totalCount);
			},
			//收起回复
			retractReply(commentId) {
				this.toggleReply(commentId);
			},
			//点赞圈子
			async likeCircle() {
				this.$debounce(async () => {
					uni.vibrateShort();

					if (!this.userInfo || !this.userInfo.id) {
						this.$Toast('请先登录');
						this.$NavigateTo('/qmy_user/login');
						return;
					}

					try {
						let res;
						if (this.circleDetail.isLikedByCurrentUser) {
							res = await unlikePostApi(this.circleId); 
						} else {
							res = await likePostApi(this.circleId);
						}

						if (res.data.code === 200) {
							this.$set(this.circleDetail, 'isLikedByCurrentUser', !this.circleDetail.isLikedByCurrentUser);
							if (this.circleDetail.isLikedByCurrentUser) {
								this.$set(this.circleDetail, 'likeCount', (this.circleDetail.likeCount || 0) + 1);
								this.$Toast('点赞成功');
							} else {
								this.$set(this.circleDetail, 'likeCount', Math.max(0, (this.circleDetail.likeCount || 0) - 1));
								this.$Toast('取消点赞成功');
							}
						} else {
							this.$Toast(res.msg || '操作失败');
						}
					} catch (e) {
						console.error('点赞/取消点赞操作异常', e);
						this.$Toast('操作失败');
					}
				}, 500, true, "likeCircle")
			},
			//轮播图
			onChange(swiper, index) {
				this.swiperIndex = index
			},
			//输入框
			async inputComment() {
				if (!this.commentText.trim()) {
					return this.$Toast('请输入内容');
				}

				if (!this.userInfo || !this.userInfo.id) {
					this.$Toast('请先登录');
					this.$NavigateTo('/qmy_user/login');
					return;
				}

				const commonCommentData = {
					postId: this.circleId,
					content: this.commentText,
					userId: this.userInfo.id,
				};

				try {
					let res;
					if (this.replyCommentType === 1) {
						// 回复评论
						res = await addReplyCommentApi(
							commonCommentData,
							this.replyCommentId,
							this.superlativeId
						);
					} else {
						// 发布主评论
						res = await addCommentApi(commonCommentData);
					}

					if (res.data.code === 200) {
						this.$Toast('评论成功');
						// 评论成功后刷新评论列表
						this.commentPage = 1;
						this.hasMoreComments = true;
						this.commentList = []; // 清空以便重新加载
						await this.getComment(1, this.commentPageSize);
						this.resetInput();
						
						// 刷新帖子评论总数
						await this.getCircleDetail();

					} else {
						this.$Toast(res.msg || '评论失败');
					}
				} catch (e) {
					console.error('评论操作异常', e);
					this.$Toast('评论失败');
				}
			},
			// 输入框获取焦点触发
			focusChange(e) {
				this.keyboardHeight = e.detail.height;
			},
			// 输入框失去焦点触发
			blurChange() {
				this.keyboardHeight = 0;
				this.resetInput();
			},
			//恢复输入框
			resetInput() {
				this.replyCommentType = 0;
				this.commentText = '';
				this.inputPlaceholder = '和大家一起聊聊吧...';
				this.inputFocus = false;
				this.replyCommentId = ''; // 清空回复评论ID
				this.superlativeId = ''; // 清空最高级评论ID
			},
			//评论主入口，由inputComment调用
			comment() {
				// inputComment 已经包含了评论逻辑，这里可以留空或移除
				console.log("Comment method called, handled by inputComment");
			},
			// 点赞评论
			async likeComment(id, type) {
				this.$debounce(async () => {
					uni.vibrateShort();

					if (!this.userInfo || !this.userInfo.id) {
						this.$Toast('请先登录');
						this.$NavigateTo('/qmy_user/login');
						return;
					}

					try {
						let targetItem;
						if (type === 0) {
							targetItem = this.commentList.find(item => item.id == id);
						} else {
							// 查找子评论
							for (let i = 0; i < this.commentList.length; i++) {
								targetItem = this.commentList[i].replyComments.find(its => its.id == id);
								if (targetItem) break;
							}
						}

						if (!targetItem) return;

						let res;
						// 统一使用 isLikedByCurrentUser 字段
						const isCurrentlyLiked = targetItem.isLikedByCurrentUser;

						if (isCurrentlyLiked) {
							res = await unlikeCommentApi(id, this.userInfo.id);
						} else {
							res = await likeCommentApi(id, this.userInfo.id);
						}

						if (res.data.code === 200) {
							// 统一更新点赞状态和数量
							this.$set(targetItem, 'isLikedByCurrentUser', !isCurrentlyLiked);
							this.$set(targetItem, 'likeCount', (targetItem.likeCount || 0) + (isCurrentlyLiked ? -1 : 1));
							this.$Toast(isCurrentlyLiked ? '取消点赞成功' : '点赞成功');
						} else {
							this.$Toast(res.msg || '操作失败');
						}
					} catch (e) {
						console.error('评论点赞/取消点赞操作异常', e);
						this.$Toast('操作失败');
					}
				}, 500, true, "likeComment");
			},
			// 回复评论
			reply(item, its) {
				this.superlativeId = its?.id || item.id;
				this.replyCommentId = item.id;
				this.inputPlaceholder = `回复@${item.userInfo.nickname || item.replyUserInfo.nickname || '匿名用户'}:`;
				this.replyCommentType = 1;
				this.inputFocus = true;
			},
			// 评论圈子
			commentCircle() {
				this.replyCommentId = '';
				this.inputPlaceholder = '和大家一起聊聊吧...';
				this.replyCommentType = 0;
				this.inputFocus = true;
			},
			// 定位到指定评论
			scrollToComment() {
				if (!this.targetCommentId) return;

				// 先展开包含目标评论的关联评论列表
				this.expandTargetReply();

				// 等待展开动画完成后再滚动
				setTimeout(() => {
					// 查找目标评论元素
					const query = uni.createSelectorQuery();
					query.select(`#comment-${this.targetCommentId}`).boundingClientRect();
					query.selectViewport().scrollOffset();
					query.exec((res) => {
						if (res[0]) {
							// 计算需要滚动的距离，考虑顶部导航栏高度
							const scrollTop = res[0].top + res[1].scrollTop - (this.menuObject ? (this
								.menuObject.height + this.menuObject.top + 8) : 0);

							// 滚动到目标位置
							uni.pageScrollTo({
								scrollTop: scrollTop,
								duration: 300
							});

							// 添加闪烁效果
							this.flashComment(this.targetCommentId);
						}
					});
				}, 350); // 等待展开动画完成
			},

			// 展开包含目标评论的关联评论列表
			expandTargetReply() {
				// 遍历评论列表找到包含目标评论的主评论
				this.commentList.forEach(comment => {
					// 检查是否是主评论本身
					if (comment.id === this.targetCommentId) {
						return; // 如果是主评论，不需要展开
					}

					// 检查是否在关联评论中
					const replyComment = comment.replyComments.find(reply => reply.id === this
						.targetCommentId);
					if (replyComment) {
						// 找到包含目标评论的主评论，展开全部关联评论
						this.$set(this.displayedReplies, comment.id, comment.replyComments.length);
					}
				});
			},

			// 闪烁效果
			flashComment(commentId) {
				this.isFlashing = true;
				let count = 0;
				const flash = setInterval(() => {
					count++;
					if (count > 3) {
						clearInterval(flash);
						this.isFlashing = false;
					}
				}, 500);
			},
		}
	}
</script>

<style lang="scss">
	.my-sdp {
		left: 50%;
		transform: translate(-50%, 0%);
	}

	.image-height {
		height: 900rpx;
	}

	.image-activity {
		width: 90rpx;
		height: 90rpx;
	}

	.image-small {
		width: 70rpx;
		height: 70rpx;
	}

	.image-small-2 {
		width: 45rpx;
		height: 45rpx;
	}

	.border-left {
		border-left: 1rpx solid #bababa;
	}

	.input-container {
		width: 400rpx;
	}

	.input-style {
		height: 50rpx;
	}

	.fixed-bottom {
		position: fixed;
		left: 0;
		z-index: 999;
		transition: bottom 0.2s ease-in-out;
	}

	button {
		background-color: #ffffff00;
		padding: 0 !important;
		margin: 0 !important;
		line-height: 0rpx !important;
	}

	.img-min {
		top: -60rpx;
		left: 0;
		z-index: 1;
		height: 60rpx;
	}

	@keyframes flash {
		0% {
			background-color: transparent;
		}

		50% {
			background-color: rgba(176, 176, 176, 0.1);
		}

		100% {
			background-color: transparent;
		}
	}

	.comment-flash {
		animation: flash 0.5s ease-in-out infinite;
		border-radius: 12rpx;
	}
</style>
